<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM节点操作</title>
  </head>
  <body>
    <div class="father">
      <div class="box1">大儿子</div>
      <div class="box2">二儿子</div>
      <div>
        小儿子
        <p>孙子</p>
      </div>
    </div>
    <script>
      // 1.查找父节点
      const box1 = document.querySelector(".box1");
      console.log("父节点：");
      console.log(box1.parentNode);
      // console.log(box1.parentElement);

      // 2.查找子节点
      const father = document.querySelector(".father");
      console.log("子节点：");
      console.log(father.children);

      // 3.获取兄弟元素
      const box2 = document.querySelector(".box2");
      // 获取前一个兄弟节点
      console.log("前一个兄弟节点：");
      console.log(box2.previousElementSibling);
      // 获取后一个兄弟节点
      console.log("后一个兄弟节点：");
      console.log(box2.nextElementSibling);
    </script>
  </body>
</html>
